<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  Permission,
  PermissionForm,
  PermissionList,
  PermissionResponse,
} from "@/api/acl/permission/type.ts";
import {
  reqAddPermission,
  reqDeletePermission,
  reqPermissionList,
  reqUpdatePermission,
} from "@/api/acl/permission";
import { ElMessage } from "element-plus";

// 权限列表
let permissionList = ref<PermissionList>([]);

// 添加权限对话框
const dialogFormVisible = ref<boolean>(false);

// form标签的宽度
const formLabelWidth = "140px";

// 添加权限表单
let form = ref<PermissionForm>({
  id: 0, // 权限id
  name: "", // 权限名称
  code: "", // 权限值
  pid: 0, // 父级id
  level: 1, // 权限等级
});

// 打开添加权限对话框
const openFormDialogAdd = (row: Permission) => {
  dialogFormVisible.value = true;
  form.value.pid = row.id as number;
  form.value.level = (row.level as number) + 1;
};

// 打开编辑权限对话框
const openFormDialogEdit = (row: Permission) => {
  dialogFormVisible.value = true;
  form.value = {
    id: row.id as number,
    name: row.name as string,
    code: row.code as string,
    pid: row.pid as number,
    level: row.level as number,
  };
};

// 获取权限列表
const getPermissionList = async () => {
  let result: PermissionResponse = await reqPermissionList();
  if (result.code == 200) {
    permissionList.value = result.data;
  } else {
    ElMessage.error("获取权限列表失败");
  }
};

// 取消添加权限
const cancelForm = () => {
  afterForm();
};

// 提交添加权限
const submitForm = async () => {
  if (form.value.id) {
    // 编辑权限
    let result = await reqUpdatePermission(form.value);
    if (result.code == 200) {
      ElMessage.success("编辑权限成功");
      afterForm();
      getPermissionList();
    } else {
      ElMessage.error("编辑权限失败");
    }
  } else {
    // 添加权限
    let result = await reqAddPermission(form.value);
    if (result.code == 200) {
      ElMessage.success("添加权限成功");
      afterForm();
      getPermissionList();
    } else {
      ElMessage.error("添加权限失败");
    }
  }
};

//  关闭对话框后的操作
const afterForm = () => {
  dialogFormVisible.value = false;
  form.value = {
    name: "", // 权限名称
    code: "", // 权限值
  };
};

// 确认删除权限
const confirmDelete = async (row: any) => {
  let result = await reqDeletePermission(row.id);
  if (result.code == 200) {
    ElMessage.success("删除权限成功");
    getPermissionList();
  } else {
    ElMessage.error("删除权限失败");
  }
};

onMounted(() => {
  // 获取权限列表
  getPermissionList();
});

defineOptions({
  name: "Permission",
});
</script>

<template>
  <el-table
    :data="permissionList"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
  >
    <el-table-column align="center" prop="name" label="权限名称" sortable />
    <el-table-column
      align="center"
      prop="code"
      label="权限值"
      width="200"
      sortable
    />
    <el-table-column
      align="center"
      prop="updateTime"
      width="200"
      label="修改时间"
      sortable
    />
    <el-table-column align="center" label="操作" sortable>
      <template #default="{ row }">
        <el-button
          @click="openFormDialogAdd(row)"
          type="success"
          size="mini"
          :disabled="row.level == 4"
        >
          {{ row.level == 3 ? "添加功能" : "添加菜单" }}
        </el-button>
        <el-button
          @click="openFormDialogEdit(row)"
          type="primary"
          size="mini"
          :disabled="row.level == 1"
          >编辑</el-button
        >
        <el-popconfirm
          @confirm="confirmDelete(row)"
          title="确认删除该权限吗？"
          icon="el-icon-info"
        >
          <template #reference>
            <el-button type="danger" size="mini" :disabled="row.level == 1"
              >删除</el-button
            >
          </template>
          <p>确认删除该权限吗？</p>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="Tips">
    <el-form :model="form">
      <el-form-item label="权限名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="权限值" :label-width="formLabelWidth">
        <el-input v-model="form.code" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelForm">取消</el-button>
        <el-button type="primary" @click="submitForm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
